<template>
    <p>列表及分页</p>
    <el-table :data="tableData" border style="width:100%">
        <el-table-column prop="account" label="用户名"></el-table-column>
        <el-table-column prop="createTime" label="注册时间"></el-table-column>
        <el-table-column prop="level" label="等级"></el-table-column>
</el-table>
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5,10]"
  layout="total,sizes,prev,pager,next,jumper" :total="total" @size-change="handleSizeChange"
  @current-change="handleCurrentChange">
</el-pagination>
</template>

<script setup>
import {ref} from 'vue'

const data=Array.from(Array(114),(v,i) => {
    return {
        account:'uaa'+(i+1),
        createTime:new Date(Date.now()+Math.ceil(Math.random()*1000)),
        level:Math.ceil(Math.random()*10)
    }
})

console.log('data',data);
const tableData=ref([])
const currentPage=ref(1)
const pageSize=ref(5)
const total=ref(0)

const getData=(page,pageSize) => {
    tableData.value=data.slice((page-1)*pageSize,page*pageSize)
    total.value=data.length
}
getData(1,pageSize.value)

const handleSizeChange=(val)=>{
    console.log('${val} items per page')
    getData(currentPage.value,val)
}
const handleCurrentChange=(val)=>{
    console.log('current page:${val}')
    getData(val,pageSize.value)
    
}
</script>